<template>
	<view class="movie-management-container">
		<!-- 搜索和操作栏 -->
		<view class="search-bar">
			<uni-easyinput
				v-model="searchKeyword"
				placeholder="搜索电影名称、导演或演员"
				:styles="inputStyles"
				prefixIcon="search"
				@input="handleSearch"
			></uni-easyinput>
			<button class="add-btn" @click="addMovie">
				<uni-icons type="plus" size="20" color="white"></uni-icons>
				<text>添加电影</text>
			</button>
		</view>

		<!-- 电影统计 -->
		<view class="movie-stats">
			<view class="stat-card">
				<text class="stat-number">{{ totalMovies }}</text>
				<text class="stat-label">总电影数</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ categoryCount }}</text>
				<text class="stat-label">分类数量</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ averageRating }}</text>
				<text class="stat-label">平均评分</text>
			</view>
		</view>

		<!-- 分类过滤 -->
		<view class="category-filter">
			<scroll-view scroll-x="true" class="category-scroll">
				<view class="category-list">
					<button 
						v-for="category in categories" 
						:key="category.id"
						class="category-btn" 
						:class="{ active: currentCategory === category.id }"
						@click="setCategory(category.id)"
					>
						{{ category.name }}
					</button>
				</view>
			</scroll-view>
		</view>

		<!-- 电影列表 -->
		<view class="movie-list">
			<view 
				v-for="movie in filteredMovies" 
				:key="movie.id" 
				class="movie-card"
			>
				<image :src="movie.poster" class="movie-poster" mode="aspectFill"></image>
				<view class="movie-info">
					<text class="movie-title">{{ movie.title }}</text>
					<text class="movie-year">{{ movie.year }}</text>
					<view class="movie-rating">
						<uni-icons type="star-filled" size="16" color="#FFD700"></uni-icons>
						<text class="rating-text">{{ movie.rating }}</text>
					</view>
					<text class="movie-category">{{ getCategoryName(movie.category) }}</text>
					<text class="movie-director">导演：{{ movie.director }}</text>
					<text class="movie-duration">时长：{{ movie.duration }}</text>
				</view>
				<view class="movie-actions">
					<button class="action-btn edit-btn" @click="editMovie(movie)">
						<uni-icons type="compose" size="16" color="white"></uni-icons>
						<text>编辑</text>
					</button>
					<button class="action-btn delete-btn" @click="deleteMovie(movie)">
						<uni-icons type="trash" size="16" color="white"></uni-icons>
						<text>删除</text>
					</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="filteredMovies.length === 0" class="empty-state">
				<uni-icons type="videocam" size="80" color="#cccccc"></uni-icons>
				<text class="empty-text">暂无电影数据</text>
				<button class="add-first-btn" @click="addMovie">添加第一部电影</button>
			</view>
		</view>
	</view>
</template>

<script>
import { useMovieStore } from '@/stores/movie.js'
import { useUserStore } from '@/stores/user.js'

export default {
	data() {
		return {
			searchKeyword: '',
			currentCategory: 'all',
			inputStyles: {
				color: '#333333',
				backgroundColor: '#f8f8f8',
				borderColor: '#e0e0e0'
			}
		}
	},
	setup() {
		const movieStore = useMovieStore()
		const userStore = useUserStore()
		return {
			movieStore,
			userStore
		}
	},
	onLoad() {
		this.checkAdminPermission()
		this.loadMovieData()
	},
	onShow() {
		this.loadMovieData()
	},
	computed: {
		totalMovies() {
			return this.movieStore.movies.length
		},
		categoryCount() {
			return this.movieStore.categories.length - 1 // 减去"全部"分类
		},
		averageRating() {
			if (this.movieStore.movies.length === 0) return '0.0'
			const total = this.movieStore.movies.reduce((sum, movie) => sum + movie.rating, 0)
			return (total / this.movieStore.movies.length).toFixed(1)
		},
		categories() {
			return this.movieStore.categories
		},
		filteredMovies() {
			let movies = this.movieStore.movies

			// 分类过滤
			if (this.currentCategory !== 'all') {
				movies = movies.filter(movie => movie.category === this.currentCategory)
			}

			// 搜索过滤
			if (this.searchKeyword.trim()) {
				const keyword = this.searchKeyword.toLowerCase()
				movies = movies.filter(movie => 
					movie.title.toLowerCase().includes(keyword) ||
					movie.director.toLowerCase().includes(keyword) ||
					(movie.cast && movie.cast.some(actor => actor.toLowerCase().includes(keyword))) ||
					(movie.description && movie.description.toLowerCase().includes(keyword))
				)
			}

			return movies.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
		}
	},
	methods: {
		// 检查管理员权限
		checkAdminPermission() {
			this.userStore.initUserData()
			
			if (!this.userStore.isAdmin) {
				uni.showModal({
					title: '权限不足',
					content: '您没有管理员权限，无法访问此页面',
					showCancel: false,
					success: () => {
						uni.navigateBack()
					}
				})
				return false
			}
			return true
		},

		// 加载电影数据
		loadMovieData() {
			this.movieStore.initMovieData()
		},

		// 搜索处理
		handleSearch() {
			// 搜索逻辑在computed中处理
		},

		// 设置分类过滤
		setCategory(categoryId) {
			this.currentCategory = categoryId
		},

		// 获取分类名称
		getCategoryName(categoryId) {
			const category = this.movieStore.categories.find(c => c.id === categoryId)
			return category ? category.name : '未知分类'
		},

		// 添加电影
		addMovie() {
			uni.navigateTo({
				url: '/pages/admin/movie-edit/movie-edit?mode=add'
			})
		},

		// 编辑电影
		editMovie(movie) {
			uni.navigateTo({
				url: `/pages/admin/movie-edit/movie-edit?mode=edit&movieId=${movie.id}`
			})
		},

		// 删除电影
		deleteMovie(movie) {
			uni.showModal({
				title: '删除电影',
				content: `确定要删除电影"${movie.title}"吗？此操作不可恢复！`,
				success: (res) => {
					if (res.confirm) {
						const result = this.movieStore.deleteMovie(movie.id)
						if (result.success) {
							uni.showToast({
								title: result.message,
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none'
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.movie-management-container {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 30rpx;
}

.search-bar {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
	align-items: center;
}

.search-bar .uni-easyinput {
	flex: 1;
}

.add-btn {
	display: flex;
	align-items: center;
	gap: 10rpx;
	padding: 20rpx 30rpx;
	background: #ff6b35;
	color: white;
	border: none;
	border-radius: 25rpx;
	font-size: 26rpx;
	white-space: nowrap;
}

.movie-stats {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.stat-card {
	flex: 1;
	background: white;
	padding: 30rpx;
	border-radius: 20rpx;
	text-align: center;
}

.stat-number {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #ff6b35;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 26rpx;
	color: #666666;
}

.category-filter {
	margin-bottom: 30rpx;
}

.category-scroll {
	white-space: nowrap;
}

.category-list {
	display: flex;
	gap: 15rpx;
	padding: 10rpx 0;
}

.category-btn {
	padding: 15rpx 30rpx;
	font-size: 26rpx;
	border: 1rpx solid #e0e0e0;
	border-radius: 25rpx;
	background: white;
	color: #666666;
	white-space: nowrap;
}

.category-btn.active {
	background: #ff6b35;
	color: white;
	border-color: #ff6b35;
}

.movie-list {
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
}

.movie-card {
	display: flex;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.movie-card:last-child {
	border-bottom: none;
}

.movie-poster {
	width: 120rpx;
	height: 160rpx;
	border-radius: 10rpx;
	margin-right: 30rpx;
}

.movie-info {
	flex: 1;
	margin-right: 20rpx;
}

.movie-title {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.movie-year {
	display: block;
	font-size: 26rpx;
	color: #666666;
	margin-bottom: 10rpx;
}

.movie-rating {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 10rpx;
}

.rating-text {
	font-size: 26rpx;
	color: #333333;
	font-weight: bold;
}

.movie-category, .movie-director, .movie-duration {
	display: block;
	font-size: 24rpx;
	color: #666666;
	margin-bottom: 5rpx;
}

.movie-actions {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
	justify-content: center;
}

.action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	padding: 15rpx 25rpx;
	border: none;
	border-radius: 20rpx;
	font-size: 24rpx;
	white-space: nowrap;
}

.edit-btn {
	background: #4CAF50;
	color: white;
}

.delete-btn {
	background: #f44336;
	color: white;
}

.empty-state {
	text-align: center;
	padding: 100rpx 30rpx;
}

.empty-text {
	display: block;
	margin: 30rpx 0;
	font-size: 28rpx;
	color: #999999;
}

.add-first-btn {
	padding: 20rpx 40rpx;
	background: #ff6b35;
	color: white;
	border: none;
	border-radius: 25rpx;
	font-size: 28rpx;
}
</style>
